<!--
 * hi-swiper-indicator - 轮播指示器
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="page-view">
        <!-- 外部使用 -->
        <module-demo title="外部使用">
            <hi-swiper :list="list" autoplay :current="current1" @change="onChange1"></hi-swiper>
            <hi-swiper-indicator :count="list.length" :current="current1"></hi-swiper-indicator>
        </module-demo>

        <!-- 内部使用 -->
        <module-demo title="内部使用">
            <hi-swiper :list="list" autoplay :current="current2" @change="onChange2">
                <template #indicator="{ current: index, count }">
                    <hi-swiper-indicator :count="count" :current="index" absolute :position="position"></hi-swiper-indicator>
                </template>
            </hi-swiper>
        </module-demo>

        <!-- 指示器模式 -->
        <module-demo title="指示器模式">
            <hi-swiper :list="list" autoplay :current="current3" @change="onChange3">
                <template #indicator="{ current: index, count }">
                    <hi-swiper-indicator :count="count" :current="index" absolute mode="line" :position="position"></hi-swiper-indicator>
                </template>
            </hi-swiper>
        </module-demo>

        <!-- 指示器位置 -->
        <module-demo title="指示器位置">
            <view class="buttons">
                <hi-button class="button" text="底部居中" @click="position = 'bottom-center'" theme="primary"></hi-button>
                <hi-button class="button" text="底部居左" @click="position = 'bottom-left'" theme="success"></hi-button>
                <hi-button class="button" text="底部居右" @click="position = 'bottom-right'" theme="warning"></hi-button>
                <hi-button class="button" text="左边居中" @click="position = 'left-center'" theme="error"></hi-button>
                <hi-button class="button" text="左边靠下" @click="position = 'left-bottom'" theme="info"></hi-button>
                <hi-button class="button" text="右边居中" @click="position = 'right-center'" theme="primary"></hi-button>
                <hi-button class="button" text="右边靠下" @click="position = 'right-bottom'" theme="success"></hi-button>
            </view>
        </module-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 轮播数据
    const list = ref([
        { id: 1, url: "/static/images/temp.jpeg" },
        { id: 2, url: "/static/images/temp.jpeg" },
        { id: 3, url: "/static/images/temp.jpeg" },
        { id: 4, url: "/static/images/temp.jpeg" },
        { id: 5, url: "/static/images/temp.jpeg" }
    ]);

    // 当前下标
    const current1 = ref(0);
    const current2 = ref(0);
    const current3 = ref(0);

    // 指示器位置
    const position = ref("bottom-center");

    // 切换事件
    function onChange1(event) {
        current1.value = event.detail.current;
    }

    function onChange2(event) {
        current2.value = event.detail.current;
    }

    function onChange3(event) {
        current3.value = event.detail.current;
    }
</script>

<style lang="scss" scoped>
    :deep(.module-demo__body) {
        align-items: stretch;
    }

    .buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }
</style>
